<template>
  <div class="electronic-invoice-container">
    <el-card class="invoice-card">
      <template #header>
        <div class="card-header">
          <h2>
            <el-icon><Document /></el-icon>
            电子发票开具
          </h2>
          <div class="header-actions">
            <el-button @click="resetForm" :icon="Refresh">重置</el-button>
            <el-button @click="previewInvoice" :icon="View" type="primary">预览发票</el-button>
          </div>
        </div>
      </template>

      <el-form
        ref="invoiceFormRef"
        :model="invoiceForm"
        :rules="formRules"
        label-width="120px"
        class="invoice-form"
      >
        <!-- 发票基本信息 -->
        <div class="form-section">
          <h3 class="section-title">
            <el-icon><InfoFilled /></el-icon>
            发票基本信息
          </h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="发票类型" prop="invoiceType">
                <el-select v-model="invoiceForm.invoiceType" placeholder="请选择发票类型" style="width: 100%">
                  <el-option label="增值税专用发票" value="special" />
                  <el-option label="增值税普通发票" value="normal" />
                  <el-option label="电子普通发票" value="electronic" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发票号码" prop="invoiceNumber">
                <el-input v-model="invoiceForm.invoiceNumber" placeholder="系统自动生成" readonly />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开票日期" prop="issueDate">
                <el-date-picker
                  v-model="invoiceForm.issueDate"
                  type="date"
                  placeholder="选择开票日期"
                  style="width: 100%"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="税率" prop="taxRate">
                <el-select v-model="invoiceForm.taxRate" placeholder="请选择税率" style="width: 100%">
                  <el-option label="13%" value="0.13" />
                  <el-option label="9%" value="0.09" />
                  <el-option label="6%" value="0.06" />
                  <el-option label="3%" value="0.03" />
                  <el-option label="0%" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 开票方信息 -->
        <div class="form-section">
          <h3 class="section-title">
            <el-icon><OfficeBuilding /></el-icon>
            开票方信息
          </h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开票方名称" prop="issuer.name">
                <el-input v-model="invoiceForm.issuer.name" placeholder="请输入开票方名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纳税人识别号" prop="issuer.taxNumber">
                <el-input v-model="invoiceForm.issuer.taxNumber" placeholder="请输入纳税人识别号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="地址" prop="issuer.address">
                <el-input v-model="invoiceForm.issuer.address" placeholder="请输入地址" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="issuer.phone">
                <el-input v-model="invoiceForm.issuer.phone" placeholder="请输入电话" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开户银行" prop="issuer.bank">
                <el-input v-model="invoiceForm.issuer.bank" placeholder="请输入开户银行" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行账号" prop="issuer.account">
                <el-input v-model="invoiceForm.issuer.account" placeholder="请输入银行账号" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 收票方信息 -->
        <div class="form-section">
          <h3 class="section-title">
            <el-icon><User /></el-icon>
            收票方信息
          </h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="收票方名称" prop="recipient.name">
                <el-input v-model="invoiceForm.recipient.name" placeholder="请输入收票方名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纳税人识别号" prop="recipient.taxNumber">
                <el-input v-model="invoiceForm.recipient.taxNumber" placeholder="请输入纳税人识别号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="地址" prop="recipient.address">
                <el-input v-model="invoiceForm.recipient.address" placeholder="请输入地址" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="recipient.phone">
                <el-input v-model="invoiceForm.recipient.phone" placeholder="请输入电话" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开户银行" prop="recipient.bank">
                <el-input v-model="invoiceForm.recipient.bank" placeholder="请输入开户银行" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行账号" prop="recipient.account">
                <el-input v-model="invoiceForm.recipient.account" placeholder="请输入银行账号" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 商品信息 -->
        <div class="form-section">
          <h3 class="section-title">
            <el-icon><Goods /></el-icon>
            商品信息
            <el-button @click="addGoodsItem" type="primary" size="small" :icon="Plus" class="add-btn">
              添加商品
            </el-button>
          </h3>
          <div class="goods-list">
            <div
              v-for="(item, index) in invoiceForm.goods"
              :key="index"
              class="goods-card"
            >
              <div class="goods-card-header">
                <span class="goods-number">商品 {{ index + 1 }}</span>
                <el-button
                  @click="removeGoodsItem(index)"
                  type="danger"
                  size="small"
                  :disabled="invoiceForm.goods.length === 1"
                >
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </div>
              
              <div class="goods-card-content">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="商品名称" :prop="`goods.${index}.name`" :rules="goodsRules.name">
                      <el-input v-model="item.name" placeholder="请输入商品名称" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="规格型号" :prop="`goods.${index}.specification`">
                      <el-input v-model="item.specification" placeholder="请输入规格型号" />
                    </el-form-item>
                  </el-col>
                </el-row>
                
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item label="单位" :prop="`goods.${index}.unit`" :rules="goodsRules.unit">
                      <el-input v-model="item.unit" placeholder="单位" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="数量" :prop="`goods.${index}.quantity`" :rules="goodsRules.quantity">
                      <el-input-number
                        v-model="item.quantity"
                        :min="0"
                        :precision="2"
                        placeholder="数量"
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="单价" :prop="`goods.${index}.unitPrice`" :rules="goodsRules.unitPrice">
                      <el-input-number
                        v-model="item.unitPrice"
                        :min="0"
                        :precision="2"
                        placeholder="单价"
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="金额">
                      <el-input
                        :value="calculateAmount(item).toFixed(2)"
                        placeholder="金额"
                        readonly
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>

        <!-- 金额汇总 -->
        <div class="form-section">
          <h3 class="section-title">
            <el-icon><Money /></el-icon>
            金额汇总
          </h3>
          <div class="amount-summary">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="amount-item">
                  <label>商品总金额：</label>
                  <span class="amount-value">¥{{ totalAmount.toFixed(2) }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="amount-item">
                  <label>税额：</label>
                  <span class="amount-value">¥{{ taxAmount.toFixed(2) }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="amount-item total">
                  <label>价税合计：</label>
                  <span class="amount-value">¥{{ totalWithTax.toFixed(2) }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 备注信息 -->
        <div class="form-section">
          <h3 class="section-title">
            <el-icon><Edit /></el-icon>
            备注信息
          </h3>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="invoiceForm.remark"
              type="textarea"
              :rows="3"
              placeholder="请输入备注信息（选填）"
            />
          </el-form-item>
        </div>

        <!-- 操作按钮 -->
        <div class="form-actions">
          <el-button @click="resetForm" size="large">重置</el-button>
          <el-button @click="saveDraft" size="large" :icon="DocumentCopy">保存草稿</el-button>
          <el-button @click="previewInvoice" size="large" :icon="View" type="primary">预览发票</el-button>
          <el-button @click="submitInvoice" size="large" :icon="Check" type="success" :loading="submitting">
            开具发票
          </el-button>
        </div>
      </el-form>
    </el-card>

    <!-- 发票预览对话框 -->
    <el-dialog
      v-model="previewVisible"
      title="发票预览"
      width="80%"
      :before-close="handlePreviewClose"
    >
      <div class="invoice-preview" v-if="previewData">
        <div class="invoice-header">
          <h2>{{ getInvoiceTypeName(invoiceForm.invoiceType) }}</h2>
          <div class="invoice-number">发票号码：{{ invoiceForm.invoiceNumber }}</div>
        </div>
        
        <div class="invoice-content">
          <div class="invoice-parties">
            <div class="issuer-info">
              <h4>开票方</h4>
              <p><strong>名称：</strong>{{ invoiceForm.issuer.name }}</p>
              <p><strong>纳税人识别号：</strong>{{ invoiceForm.issuer.taxNumber }}</p>
              <p><strong>地址：</strong>{{ invoiceForm.issuer.address }}</p>
              <p><strong>电话：</strong>{{ invoiceForm.issuer.phone }}</p>
              <p><strong>开户银行：</strong>{{ invoiceForm.issuer.bank }}</p>
              <p><strong>银行账号：</strong>{{ invoiceForm.issuer.account }}</p>
            </div>
            
            <div class="recipient-info">
              <h4>收票方</h4>
              <p><strong>名称：</strong>{{ invoiceForm.recipient.name }}</p>
              <p><strong>纳税人识别号：</strong>{{ invoiceForm.recipient.taxNumber }}</p>
              <p><strong>地址：</strong>{{ invoiceForm.recipient.address }}</p>
              <p><strong>电话：</strong>{{ invoiceForm.recipient.phone }}</p>
              <p><strong>开户银行：</strong>{{ invoiceForm.recipient.bank }}</p>
              <p><strong>银行账号：</strong>{{ invoiceForm.recipient.account }}</p>
            </div>
          </div>
          
          <div class="goods-table">
            <table>
              <thead>
                <tr>
                  <th>商品名称</th>
                  <th>规格型号</th>
                  <th>单位</th>
                  <th>数量</th>
                  <th>单价</th>
                  <th>金额</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in invoiceForm.goods" :key="index">
                  <td>{{ item.name }}</td>
                  <td>{{ item.specification }}</td>
                  <td>{{ item.unit }}</td>
                  <td>{{ item.quantity }}</td>
                  <td>¥{{ item.unitPrice?.toFixed(2) }}</td>
                  <td>¥{{ calculateAmount(item).toFixed(2) }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div class="amount-summary-preview">
            <div class="summary-row">
              <span>商品总金额：</span>
              <span>¥{{ totalAmount.toFixed(2) }}</span>
            </div>
            <div class="summary-row">
              <span>税率：</span>
              <span>{{ (parseFloat(invoiceForm.taxRate) * 100).toFixed(1) }}%</span>
            </div>
            <div class="summary-row">
              <span>税额：</span>
              <span>¥{{ taxAmount.toFixed(2) }}</span>
            </div>
            <div class="summary-row total">
              <span>价税合计：</span>
              <span>¥{{ totalWithTax.toFixed(2) }}</span>
            </div>
          </div>
          
          <div class="invoice-footer" v-if="invoiceForm.remark">
            <p><strong>备注：</strong>{{ invoiceForm.remark }}</p>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="previewVisible = false">关闭</el-button>
          <el-button @click="submitInvoice" type="primary" :loading="submitting">
            确认开具
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'

// 接口定义
interface IssuerInfo {
  name: string
  taxNumber: string
  address: string
  phone: string
  bank: string
  account: string
}

interface RecipientInfo {
  name: string
  taxNumber: string
  address: string
  phone: string
  bank: string
  account: string
}

interface GoodsItem {
  name: string
  specification: string
  unit: string
  quantity: number
  unitPrice: number
}

interface InvoiceForm {
  invoiceType: string
  invoiceNumber: string
  issueDate: string
  taxRate: string
  issuer: IssuerInfo
  recipient: RecipientInfo
  goods: GoodsItem[]
  remark: string
}

// 响应式数据
const invoiceFormRef = ref<FormInstance>()
const submitting = ref(false)
const previewVisible = ref(false)
const previewData = ref<any>(null)

// 表单数据
const invoiceForm = reactive<InvoiceForm>({
  invoiceType: '',
  invoiceNumber: '',
  issueDate: '',
  taxRate: '0.13',
  issuer: {
    name: '',
    taxNumber: '',
    address: '',
    phone: '',
    bank: '',
    account: ''
  },
  recipient: {
    name: '',
    taxNumber: '',
    address: '',
    phone: '',
    bank: '',
    account: ''
  },
  goods: [
    {
      name: '',
      specification: '',
      unit: '',
      quantity: 1,
      unitPrice: 0
    }
  ],
  remark: ''
})

// 表单验证规则
const formRules: FormRules = {
  invoiceType: [
    { required: true, message: '请选择发票类型', trigger: 'change' }
  ],
  issueDate: [
    { required: true, message: '请选择开票日期', trigger: 'change' }
  ],
  taxRate: [
    { required: true, message: '请选择税率', trigger: 'change' }
  ],
  'issuer.name': [
    { required: true, message: '请输入开票方名称', trigger: 'blur' }
  ],
  'issuer.taxNumber': [
    { required: true, message: '请输入纳税人识别号', trigger: 'blur' },
    { pattern: /^[0-9A-HJ-NPQRTUWXYM]{2}\d{6}[0-9A-HJ-NPQRTUWXYM]{8,12}$/, message: '纳税人识别号格式不正确', trigger: 'blur' }
  ],
  'issuer.address': [
    { required: true, message: '请输入地址', trigger: 'blur' }
  ],
  'issuer.phone': [
    { required: true, message: '请输入电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/, message: '电话格式不正确', trigger: 'blur' }
  ],
  'issuer.bank': [
    { required: true, message: '请输入开户银行', trigger: 'blur' }
  ],
  'issuer.account': [
    { required: true, message: '请输入银行账号', trigger: 'blur' },
    { pattern: /^\d{16,19}$/, message: '银行账号格式不正确', trigger: 'blur' }
  ],
  'recipient.name': [
    { required: true, message: '请输入收票方名称', trigger: 'blur' }
  ],
  'recipient.taxNumber': [
    { required: true, message: '请输入纳税人识别号', trigger: 'blur' },
    { pattern: /^[0-9A-HJ-NPQRTUWXYM]{2}\d{6}[0-9A-HJ-NPQRTUWXYM]{8,12}$/, message: '纳税人识别号格式不正确', trigger: 'blur' }
  ],
  'recipient.address': [
    { required: true, message: '请输入地址', trigger: 'blur' }
  ],
  'recipient.phone': [
    { required: true, message: '请输入电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/, message: '电话格式不正确', trigger: 'blur' }
  ],
  'recipient.bank': [
    { required: true, message: '请输入开户银行', trigger: 'blur' }
  ],
  'recipient.account': [
    { required: true, message: '请输入银行账号', trigger: 'blur' },
    { pattern: /^\d{16,19}$/, message: '银行账号格式不正确', trigger: 'blur' }
  ]
}

// 商品验证规则
const goodsRules = {
  name: [
    { required: true, message: '请输入商品名称', trigger: 'blur' }
  ],
  unit: [
    { required: true, message: '请输入单位', trigger: 'blur' }
  ],
  quantity: [
    { required: true, message: '请输入数量', trigger: 'blur' },
    { type: 'number', min: 0.01, message: '数量必须大于0', trigger: 'blur' }
  ],
  unitPrice: [
    { required: true, message: '请输入单价', trigger: 'blur' },
    { type: 'number', min: 0, message: '单价不能小于0', trigger: 'blur' }
  ]
}

// 计算属性
const totalAmount = computed(() => {
  return invoiceForm.goods.reduce((total, item) => {
    return total + (item.quantity * item.unitPrice)
  }, 0)
})

const taxAmount = computed(() => {
  return totalAmount.value * parseFloat(invoiceForm.taxRate)
})

const totalWithTax = computed(() => {
  return totalAmount.value + taxAmount.value
})

// 方法
const generateInvoiceNumber = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const random = String(Math.floor(Math.random() * 10000)).padStart(4, '0')
  return `${year}${month}${day}${random}`
}

const calculateAmount = (item: GoodsItem) => {
  return (item.quantity || 0) * (item.unitPrice || 0)
}

const addGoodsItem = () => {
  invoiceForm.goods.push({
    name: '',
    specification: '',
    unit: '',
    quantity: 1,
    unitPrice: 0
  })
}

const removeGoodsItem = (index: number) => {
  if (invoiceForm.goods.length > 1) {
    invoiceForm.goods.splice(index, 1)
  } else {
    ElMessage.warning('至少需要保留一个商品项')
  }
}

const resetForm = () => {
  ElMessageBox.confirm('确定要重置表单吗？所有数据将被清空。', '确认重置', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    invoiceFormRef.value?.resetFields()
    invoiceForm.goods = [{
      name: '',
      specification: '',
      unit: '',
      quantity: 1,
      unitPrice: 0
    }]
    invoiceForm.invoiceNumber = generateInvoiceNumber()
    invoiceForm.issueDate = new Date().toISOString().split('T')[0]
    ElMessage.success('表单已重置')
  }).catch(() => {
    // 用户取消
  })
}

const saveDraft = () => {
  // 保存草稿逻辑
  ElMessage.success('草稿已保存')
}

const previewInvoice = async () => {
  try {
    await invoiceFormRef.value?.validate()
    previewData.value = { ...invoiceForm }
    previewVisible.value = true
  } catch (error) {
    ElMessage.error('请完善必填信息后再预览')
  }
}

const handlePreviewClose = () => {
  previewVisible.value = false
  previewData.value = null
}

const getInvoiceTypeName = (type: string) => {
  const typeMap: Record<string, string> = {
    special: '增值税专用发票',
    normal: '增值税普通发票',
    electronic: '电子普通发票'
  }
  return typeMap[type] || '发票'
}

const submitInvoice = async () => {
  try {
    await invoiceFormRef.value?.validate()
    
    submitting.value = true
    
    // 模拟提交过程
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    ElMessage.success('发票开具成功！')
    previewVisible.value = false
    
    // 这里可以添加实际的提交逻辑
    console.log('发票数据：', invoiceForm)
    
  } catch (error) {
    ElMessage.error('请完善必填信息后再提交')
  } finally {
    submitting.value = false
  }
}

// 生命周期
onMounted(() => {
  invoiceForm.invoiceNumber = generateInvoiceNumber()
  invoiceForm.issueDate = new Date().toISOString().split('T')[0]
})
</script>

<style scoped>
.electronic-invoice-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.invoice-card {
  max-width: 1200px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.card-header h2 {
  margin: 0;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.invoice-form {
  padding: 20px;
}

.form-section {
  margin-bottom: 30px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e4e7ed;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid #409eff;
  padding-bottom: 10px;
}

.add-btn {
  margin-left: auto;
}

.goods-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.goods-card {
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.goods-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: #409eff;
}

.goods-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.goods-number {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.goods-card-content {
  padding: 0;
}

.goods-card-content .el-form-item {
  margin-bottom: 20px;
}

.goods-card-content .el-form-item__label {
  font-weight: 500;
  color: #606266;
}

.amount-summary {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e4e7ed;
}

.amount-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e4e7ed;
}

.amount-item:last-child {
  border-bottom: none;
}

.amount-item.total {
  font-weight: 600;
  font-size: 16px;
  color: #e6a23c;
  border-top: 2px solid #e6a23c;
  margin-top: 10px;
  padding-top: 15px;
}

.amount-value {
  font-weight: 600;
  color: #303133;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

/* 发票预览样式 */
.invoice-preview {
  font-family: 'Microsoft YaHei', sans-serif;
  background: white;
  padding: 30px;
  border: 2px solid #333;
  border-radius: 8px;
}

.invoice-header {
  text-align: center;
  margin-bottom: 30px;
  border-bottom: 2px solid #333;
  padding-bottom: 20px;
}

.invoice-header h2 {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: bold;
}

.invoice-number {
  font-size: 16px;
  color: #666;
}

.invoice-content {
  margin-bottom: 20px;
}

.invoice-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.issuer-info,
.recipient-info {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 6px;
}

.issuer-info h4,
.recipient-info h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
}

.issuer-info p,
.recipient-info p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.5;
}

.goods-table {
  margin-bottom: 20px;
}

.goods-table table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #333;
}

.goods-table th,
.goods-table td {
  border: 1px solid #333;
  padding: 10px;
  text-align: center;
}

.goods-table th {
  background: #f5f5f5;
  font-weight: 600;
}

.amount-summary-preview {
  border: 1px solid #333;
  padding: 15px;
  background: #f9f9f9;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  font-size: 14px;
}

.summary-row.total {
  font-weight: 600;
  font-size: 16px;
  color: #e6a23c;
  border-top: 1px solid #333;
  padding-top: 10px;
  margin-top: 15px;
}

.invoice-footer {
  margin-top: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 6px;
}

.invoice-footer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .electronic-invoice-container {
    padding: 10px;
  }
  
  .card-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .header-actions {
    justify-content: center;
  }
  
  .invoice-parties {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .form-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .goods-item .el-col {
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .invoice-form {
    padding: 10px;
  }
  
  .form-section {
    padding: 15px;
  }
  
  .invoice-preview {
    padding: 15px;
  }
  
  .goods-table {
    font-size: 12px;
  }
  
  .goods-table th,
  .goods-table td {
    padding: 5px;
  }
}
</style>
